<script setup>
import IconSimple from '@/components/icon-simple/index.vue'
import {useBoolean} from '@/hooks/useBoolean'

const props = defineProps({
  modelValue: Boolean,
})

const emit = defineEmits(['update:modelValue'])

const { boolean, trigger } = useBoolean(props.modelValue)

watch(props, trigger)

watch(boolean, () => emit('update:modelValue', boolean.value))

</script>

<template>
  <view class="sort-bar-container" @click="trigger">
    <text class="sort-bar-label inline-block-middle"><slot></slot></text>
    <icon-simple class="icon-simple inline-block-middle" :class="{ 'selector-bar-selected': boolean }" name="retract" />
  </view>
</template>

<style scoped lang="scss">
.sort-bar-container {
  padding: 12rpx 0;
  width: 100%;
  text-align: center;
}

.sort-bar-label {
  @include fs36w600;
}

.icon-simple {
  transition: all .3s;
  transform: rotate(180deg);
}

.selector-bar-selected {
  transform: rotate(0deg);
}
</style>
